<template>
	<div class="contant">
		<navBar :navBar="navBar"></navBar>
		<van-tabs v-model="active" color="#588bf7" title-active-color="#588bf7" animated @click="getClickFunc" @change="getClickFunc">
			<van-tab v-for="(item, index) in tabList" :key="index" :title="item"></van-tab>
		</van-tabs>
		<div class="content">
			<div class="list" v-show="active == 0">
				<div
					class="oneitem"
					v-for="(item, index) in symbolsArray"
					:key="index"
					@click="
						to('/trade', {
							symbol: item.symbol
						})
					"
				>
					<img v-if="item.img" :src="item.img" alt="" class="itemicon" />
					<img v-else-if="!item.img" src="../../assets/images/coin.png" alt="" class="itemicon" />
					<div class="iteminfo">
						<div class="name">
							{{ item.EN_name }}
							<span v-if="item.is_ft != 1">/{{ $t('USDT') }}</span>
						</div>
						<div class="num" v-if="futures[item.symbol] && futures[item.symbol].amount">
							{{ $t('量') }}：{{ futures[item.symbol].amount }}
						</div>
					</div>
					<div
						:class="[futures[item.symbol].ratio > 0 ? 'up' : 'down', 'number']"
						v-if="futures[item.symbol] && futures[item.symbol].ratio"
					>
						{{ futures[item.symbol].price }}
					</div>
					<div
						:class="[futures[item.symbol].ratio > 0 ? 'btnup' : 'btndown', 'btn']"
						v-if="futures[item.symbol] && futures[item.symbol].ratio"
					>
						{{ futures[item.symbol].ratio > 0 ? '+' : '' }}{{ futures[item.symbol].ratio }}%
					</div>
				</div>
			</div>
			<div class="list" v-show="active == 1">
				<div
					class="oneitem"
					v-for="(item, index) in symbolsArray"
					:key="index"
					@click="
						to('/trade', {
							symbol: item.symbol
						})
					"
				>
					<img v-if="item.img" :src="item.img" alt="" class="itemicon" />
					<img v-else-if="!item.img" src="../../assets/images/coin.png" alt="" class="itemicon" />
					<div class="iteminfo">
						<div class="name">
							{{ item.EN_name }}
							<span v-if="item.is_ft != 1">/{{ $t('USDT') }}</span>
						</div>
						<div class="num" v-if="futures[item.symbol] && futures[item.symbol].amount">
							{{ $t('量') }}：{{ futures[item.symbol].amount }}
						</div>
					</div>
					<div
						:class="[futures[item.symbol].ratio > 0 ? 'up' : 'down', 'number']"
						v-if="futures[item.symbol] && futures[item.symbol].ratio"
					>
						{{ futures[item.symbol].price }}
					</div>
					<div
						:class="[futures[item.symbol].ratio > 0 ? 'btnup' : 'btndown', 'btn']"
						v-if="futures[item.symbol] && futures[item.symbol].ratio"
					>
						{{ futures[item.symbol].ratio > 0 ? '+' : '' }}{{ futures[item.symbol].ratio }}%
					</div>
				</div>
			</div>
		</div>
		<tabBar :active="2"></tabBar>
	</div>
</template>

<script>
import navBar from '@/components/navBar.vue';
import tabBar from '@/components/tabBar.vue';
import { EventBus } from '@/utils/event-bus';
export default {
	name: 'quotes',
	components: { tabBar, navBar },
	data() {
		return {
			futures: [],
			navBar: {
				back: false,
				title: this.$t('行情'),
				close: false,
				btn: ''
			},
			active: 1,
			// 币种列表
			symbolsArray: [],
			tabList01: [],
			ch: {}, // 实时数据
			sort: true, // 是否排序
			tabList: [this.$t('自选'), this.$t('期货')]
		};
	},
	created() {
		this.$nextTick(async () => {
			this.symbolsArray = await this.initMarketInfo();
			this.init()
			this.$socket.on('sub.futures.list@global', this.revData)
		});
	},
	mounted() {},

	methods: {
		//跳转页面
		to(to, query) {
			this.$router.push({ path: to, query: query });
		},
		// 初始化数据
		init() {
			// vuex里先取出数据
			/*this.symbolsArray.forEach(item => {
				let d = this.$store.state.websocket.ch[`market.${item.symbol}.detail`];
				if (!d) return;
				this.$set(
				  d,
				  "change",
				  parseFloat(
					((d.tick.close - d.tick.open) / d.tick.open) * 100
				  ).toFixed(2)
				);
				this.$set(this.ch, `market.${item.symbol}.detail`, d);
				// console.log(this.ch, "行情ch");
				this.changeSort(this.ch);
			});*/
		},
		// tab切换
		async getClickFunc(val) {
			if (val == 0) {
				this.symbolsArray = await this.initMyCoinInfo();
				this.init();
			} else if (val == 1) {
				this.symbolsArray = await this.initMarketInfo();
				this.init();
			}
		},
		// 获取首页滑动数据
		async initMarketInfo() {
			const result = await new Promise(resolve => {
				$postAxios(api.getMarket, {}, res => {
					if (res.code == 0) {
						let arr = res.data.map(item => {
							let obj = {
								symbol: item.is_ft ? String(item.code).toUpperCase() : String(item.EN_name).toLowerCase() + 'usdt',
								title: item.is_ft ? item.EN_name : item.EN_name + '/USDT',
								EN_name: item.EN_name,
								bi_id: item.bi_id,
								is_zixuan: item.is_zixuan,
								img: item.img,
								is_ft: item.is_ft
							};
							return obj;
						});
						resolve(arr);
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			});
			return result;
		},
		//  获取我的自选列表
		async initMyCoinInfo() {
			const result = await new Promise(resolve => {
				$postAxios(api.getLikeCoin, {}, res => {
					if (res.code == 0) {
						let arr = res.data.map(item => {
							let obj = {
								symbol: item.is_ft ? String(item.code).toUpperCase() : String(item.EN_name).toLowerCase() + 'usdt',
								title: item.is_ft ? item.EN_name : item.EN_name + '/USDT',
								EN_name: item.EN_name,
								bi_id: item.bi_id,
								is_zixuan: item.is_zixuan,
								img: item.img,
								is_ft: item.is_ft
							};
							return obj;
						});
						resolve(arr);
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			});
			return result;
		},
		revData(res) {
			// console.log(res)
			this.futures = res
		}
	}
};
</script>

<style lang="scss" scoped>
.contant {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	background-color: rgba(247, 246, 251, 1);
	::v-deep .van-tabs__nav {
		width: 100%;
		height: 60px;
		position: absolute;
		left: 0;
		top: 40px;
		z-index: 999;
		background-color: transparent;
		.van-tab {
			background-color: #ffffff;
		}
	}
	.content {
		width: 100%;
		position: absolute;
		left: 0;
		top: 100px;
		bottom: 54px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.list {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 10px 60px;
		.oneitem {
			width: 100%;
			box-sizing: border-box;
			padding: 15px;
			margin-bottom: 10px;
			background-color: #ffffff;
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.itemicon {
				width: 25px;
				height: 25px;
			}
			.iteminfo {
				flex: 1;
				padding-left: 7px;
				display: flex;
				flex-direction: column;
				align-content: flex-start;
				justify-content: center;
				.name {
					font-size: 15px;
					color: #333333;
					span {
						font-size: 12px;
						color: #a4a4a4;
					}
				}
				.num {
					font-size: 12px;
					color: #a4a4a4;
				}
			}
			.number {
				flex: 1;
				font-size: 15px;
			}
			.up {
				color: #2ebc83;
			}
			.down {
				color: #cd4e65;
			}
			.btn {
				width: 70px;
				height: 32px;
				font-size: 12px;
				text-align: center;
				line-height: 32px;
				color: #ffffff;
				border-radius: 5px;
			}
			.btnup {
				background-color: #2ebc83;
			}
			.btndown {
				background-color: #ec605f;
			}
		}
	}
}
</style>
